import React, { useState } from "react";
import { Form, Card, Button, Input } from "antd";
import "./index.css";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { registerUser } from "@/redux/user/Register/RegisterStore";
import Tip from "@/components/Commons/Tip";

function Register(props) {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  // const registerData = useSelector((state) => state.registerData);
  const dispatch = useDispatch();
  const [showTip, setShowTip] = useState(false);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function handleRegister() {
    console.log(email, password);
    const registerData = { email: email, password: password };
    console.log(registerData);
    dispatch(registerUser(registerData));
    setShowTip(true);
  }

  function handleLogin() {
    navigate("/login");
  }

  function handleTipContinue() {
    setShowTip(false);
    navigate("/login");
  }

  return (
    <div className="register-container">
      <Card className="register-card">
        <div className="resgister-title-container">
          <div className="register-title">create an account</div>
          <div className="register-subtitle">
            Already have an account ?
            <span className="register-subtitle-link" onClick={handleLogin}>
              Log in
            </span>
          </div>
        </div>
        <div className="register-form-container">
          <Form className="Form" layout="horizontal" ref={form}>
            <Form.Item layout="horizontal">
              <div className="content-container">
                <div className="email-container">
                  <div className="email-label">Email address</div>
                  <Input
                    className="email-input"
                    value={email}
                    onBlur={(e) => setEmail(e.target.value)}
                  ></Input>
                </div>
                <div className="password-container">
                  <div className="password-label">Password</div>
                  <Input
                    className="password-input"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  ></Input>
                </div>
                <div className="subimit-button">
                  <Button
                    shape="round"
                    className="register-button"
                    onClick={handleRegister}
                  >
                    Create an account
                  </Button>
                </div>
              </div>
            </Form.Item>
          </Form>
        </div>
      </Card>

      {showTip && (
        <div className="tip-container">
          <Tip content="注册成功" ONClick={handleTipContinue} />
        </div>
      )}
    </div>
  );
}

export default Register;
